<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor  style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <div class="single_item_title">雨天气：</div>
            <div style="margin-right: 10px;">
              <el-button @click="weatherEffect('rain')">开始</el-button>
              <el-button @click="removeWeatherEffect('rain')">结束</el-button>
            </div>
          </div>
          <div class="single_item">
            <div class="single_item_title">雪天气：</div>
            <div style="margin-right: 10px;">
              <el-button @click="weatherEffect('snow')">开始</el-button>
              <el-button @click="removeWeatherEffect('snow')">结束</el-button>
            </div>
          </div>
          <div class="single_item">
            <div class="single_item_title">雾天气：</div>
            <div style="margin-right: 10px;">
              <el-button @click="weatherEffect('flog')">开始</el-button>
              <el-button @click="removeWeatherEffect('fog')">结束</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import {
  loadWeatherRain,
  removeWeatherRain,
  loadWeatherSnow,
  removeWeatherSnow,
  loadWeatherFog,
  removeWeatherFog
} from "@/widgets/modelExample_cesium/common/weatherEffects";
import {onMounted, ref} from "vue";

import AceEditor from "@/components/aceEditor.vue";

const htmlStr=ref(`
<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <div class="single_item_title">雨天气：</div>
            <div style="margin-right: 10px;">
              <el-button @click="weatherEffect('rain')">开始</el-button>
              <el-button @click="removeWeatherEffect('rain')">结束</el-button>
            </div>
          </div>
          <div class="single_item">
            <div class="single_item_title">雪天气：</div>
            <div style="margin-right: 10px;">
              <el-button @click="weatherEffect('snow')">开始</el-button>
              <el-button @click="removeWeatherEffect('snow')">结束</el-button>
            </div>
          </div>
          <div class="single_item">
            <div class="single_item_title">雾天气：</div>
            <div style="margin-right: 10px;">
              <el-button @click="weatherEffect('flog')">开始</el-button>
              <el-button @click="removeWeatherEffect('fog')">结束</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import {
  loadWeatherRain,
  removeWeatherRain,
  loadWeatherSnow,
  removeWeatherSnow,
  loadWeatherFog,
  removeWeatherFog
} from "@/widgets/modelExample_cesium/common/weatherEffects";
import {onMounted, ref} from "vue";


const weatherEffect=(type:string)=>{
   if(type==='rain'){
     loadWeatherRain(cViewer.value,20,90);
   }else if(type==='snow'){
     loadWeatherSnow(cViewer.value,90);
   }else if(type==="fog"){
     loadWeatherFog(cViewer.value);
   }
}

const removeWeatherEffect=(type:string)=>{
  if(type==='rain'){
    removeWeatherRain(cViewer.value);
  }else if(type==='snow'){
    removeWeatherSnow(cViewer.value);
  }else if(type==="fog"){
    removeWeatherFog(cViewer.value);
  }
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 240px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .single_item{
    border: 1px solid #40a9ff;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }
  .single_item_title{
    margin: 10px;
    color: #ffffff;
  }
}
</style>

`);
const  tsStr=ref(`
  import * as Cesium from 'cesium'

let rainEffect:any=null;
let snowEffect:any=null;
let fogEffect:any=null;

/**
 *
 * @param viewer
 * @param rainWidth  20
 * @param rainSpeed   90
 */
const loadWeatherRain=(viewer:any,rainWidth:number, rainSpeed:number)=>{
    const FS_Rain = \`uniform sampler2D colorTexture;
                 in vec2 v_textureCoordinates;
           uniform float tiltAngle;
           uniform float rainSize;
           uniform float rainWidth;
           uniform float rainSpeed;
                 float hash(float x){
                        return fract(sin(x*233.3)*13.13);
                 }
           out vec4 vFragColor;
                void main(void){
                    float time = czm_frameNumber / rainSpeed;
                  vec2 resolution = czm_viewport.zw;
                  vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
                  vec3 c=vec3(1.0,1.0,1.0);
                  float a= tiltAngle;
                  float si=sin(a),co=cos(a);
                  uv*=mat2(co,-si,si,co);
                  uv*=length(uv+vec2(0,4.9))*rainSize + 1.;
                  float v = 1.0 - abs(sin(hash(floor(uv.x * rainWidth)) * 2.0));
                  float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;
                  c*=v*b;
            vFragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c,.3), .3);
                }
    \`;
    rainEffect = new Cesium.PostProcessStage({
        name: "hi_rain",
        fragmentShader: FS_Rain,
        uniforms: {
            tiltAngle: 0.5, // 倾斜角度
            rainSize: 0.6, // 雨大小
            rainWidth, //雨长度
            rainSpeed, //雨速
        },
    });
    viewer.scene.postProcessStages.add(rainEffect);
}


const  removeWeatherRain=(viewer:any)=>{
    if(rainEffect){
        viewer.scene.postProcessStages.remove(rainEffect);
        rainEffect=null;
    }
}

/**
 *
 * @param rainSpeed  90.0
 */
const loadWeatherSnow=(viewer:any,rainSpeed:number)=>{
    const FS_Snow = \`uniform sampler2D colorTexture;
    in vec2 v_textureCoordinates;
    uniform float rainSpeed;
    float snow(vec2 uv,float scale){
        float time = czm_frameNumber / rainSpeed;
        float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;
        uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;
        uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;
        p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);
        k=smoothstep(0.,k,sin(f.x+f.y)*0.01);
        return k*w;
    }
    out vec4 vFragColor;
    void main(void){
        vec2 resolution = czm_viewport.zw;
        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
        vec3 finalColor=vec3(0);
        float c = 0.0;
        c+=snow(uv,50.)*.0;
        c+=snow(uv,30.)*.0;
        c+=snow(uv,10.)*.0;
        c+=snow(uv,5.);
        c+=snow(uv,4.);
        c+=snow(uv,3.);
        c+=snow(uv,2.);
        finalColor=(vec3(c));
        vFragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);
    }
\`;

    snowEffect = new Cesium.PostProcessStage({
        name: "hi_snow",
        fragmentShader: FS_Snow,
        uniforms: {
            rainSpeed, //雪速
        },
    });
    viewer.scene.postProcessStages.add(snowEffect);
}

/**
 *
 * @param viewer
 */
const  removeWeatherSnow=(viewer:any)=>{
    if(snowEffect){
       viewer.scene.postProcessStages.remove(snowEffect);
        snowEffect=null;
    }
}

/**
 *
 * @param viewer
 */
const loadWeatherFog=(viewer:any)=>{
    const FS_Fog = \`float getDistance(sampler2D depthTexture, vec2 texCoords)
  {
      float depth = czm_unpackDepth(texture(depthTexture, texCoords));
      if (depth == 0.0) {
          return czm_infinity;
      }
      vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);
      return -eyeCoordinate.z / eyeCoordinate.w;
  }
  //根据距离，在中间进行插值
  float interpolateByDistance(vec4 nearFarScalar, float distance)
  {
      //根据常识，雾应该是距离远，越看不清，近距离内的物体可以看清
      //因此近距离alpha=0，远距离的alpha=1.0
      //本例中设置可见度为200米
      //雾特效的起始距离
      float startDistance = nearFarScalar.x;
      //雾特效的起始alpha值
      float startValue = nearFarScalar.y;
      //雾特效的结束距离
      float endDistance = nearFarScalar.z;
      //雾特效的结束alpha值
      float endValue = nearFarScalar.w;
      //根据每段距离占总长度的占比，插值alpha，距离越远，alpha值越大。插值范围0,1。
      float t = clamp((distance - startDistance) / (endDistance - startDistance), 0.0, 1.0);
      return mix(startValue, endValue, t);
  }
  vec4 alphaBlend(vec4 sourceColor, vec4 destinationColor)
  {
      return sourceColor * vec4(sourceColor.aaa, 1.0) + destinationColor * (1.0 - sourceColor.a);
  }
  uniform sampler2D colorTexture;
  uniform sampler2D depthTexture;
  uniform vec4 fogByDistance;
  uniform vec4 fogColor;
  in vec2 v_textureCoordinates;
  void main(void)
  {
      //获取地物距相机的距离
      float distance = getDistance(depthTexture, v_textureCoordinates);
      //获取场景原本的纹理颜色
      vec4 sceneColor = texture(colorTexture, v_textureCoordinates);
      //根据距离，对alpha进行插值
      float blendAmount = interpolateByDistance(fogByDistance, distance);
      //将alpha变化值代入雾的原始颜色中，并将雾与场景原始纹理进行融合
      vec4 finalFogColor = vec4(fogColor.rgb, fogColor.a * blendAmount);
      out_FragColor = alphaBlend(finalFogColor, sceneColor);
  }\`;

    fogEffect = new Cesium.PostProcessStage({
        name: "hi_fog",
        fragmentShader: FS_Fog,
        uniforms: {
            fogByDistance: new Cesium.Cartesian4(500, 0.0, 4000, 0.8), //
            fogColor: Cesium.Color.WHITE,
        },
    });
    viewer.scene.postProcessStages.add(fogEffect);
}

/**
 *
 * @param viewer
 */
const  removeWeatherFog=(viewer:any)=>{
    if(fogEffect){
       viewer.scene.postProcessStages.remove(fogEffect);
        fogEffect=null;
    }
}

export {
    loadWeatherRain,
    removeWeatherRain,
    loadWeatherSnow,
    removeWeatherSnow,
    loadWeatherFog,
    removeWeatherFog
}

`);

const weatherEffect=(type:string)=>{
   if(type==='rain'){
     loadWeatherRain(cViewer.value,20,90);
   }else if(type==='snow'){
     loadWeatherSnow(cViewer.value,90);
   }else if(type==="fog"){
     loadWeatherFog(cViewer.value);
   }
}

const removeWeatherEffect=(type:string)=>{
  if(type==='rain'){
    removeWeatherRain(cViewer.value);
  }else if(type==='snow'){
    removeWeatherSnow(cViewer.value);
  }else if(type==="fog"){
    removeWeatherFog(cViewer.value);
  }
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 240px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .single_item{
    border: 1px solid #40a9ff;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }
  .single_item_title{
    margin: 10px;
    color: #ffffff;
  }
}
</style>
